<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="app-name">Vireo商城</text>
      <text class="welcome-text">欢迎登录</text>
    </view>
    
    <view class="login-content">
      <button class="wechat-login-btn" @tap="wxLogin">
        <image class="wechat-icon" src="/static/wechat-icon.png" mode="aspectFit"></image>
        微信快速登录
      </button>
      
      <view class="login-tips">
        <text>登录即表示同意</text>
        <text class="link" @tap="showUserAgreement">《用户协议》</text>
        <text>和</text>
        <text class="link" @tap="showPrivacyPolicy">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      canIUseGetUserProfile: false,
      code: '',
      isLogging: false
    };
  },
  onLoad() {
    // 检查是否可以使用getUserProfile API
    if (uni.getUserProfile) {
      this.canIUseGetUserProfile = true;
    }
    
    // 获取登录code
    this.getLoginCode();
  },
  methods: {
    // 获取登录code
    getLoginCode() {
      uni.login({
        provider: 'weixin',
        success: (res) => {
          this.code = res.code;
        },
        fail: (err) => {
          console.error('获取登录code失败:', err);
          uni.showToast({
            title: '获取登录凭证失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 微信登录
    wxLogin() {
      if (!this.code) {
        this.getLoginCode();
        return;
      }
      
      // 如果支持getUserProfile，则使用新API
      if (this.canIUseGetUserProfile) {
        this.getUserProfile();
      } else {
        // 否则使用旧API
        this.getUserInfo();
      }
    },
    
    // 新版本获取用户信息
    getUserProfile() {
      uni.getUserProfile({
        desc: '用于完善用户资料',
        success: (res) => {
          this.doLogin(res);
        },
        fail: (err) => {
          console.error('获取用户信息失败:', err);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 旧版本获取用户信息
    getUserInfo() {
      uni.getUserInfo({
        success: (res) => {
          this.doLogin(res);
        },
        fail: (err) => {
          console.error('获取用户信息失败:', err);
          uni.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 兼容旧版本的获取用户信息方法
    onGetUserInfo(e) {
      if (e.detail.userInfo) {
        this.doLogin(e.detail);
      } else {
        uni.showToast({
          title: '需要授权才能登录',
          icon: 'none'
        });
      }
    },
    
    // 执行登录
    doLogin(userInfo) {
      // 防止重复登录
      if (this.isLogging) {
        return;
      }
      this.isLogging = true;
      
      uni.showLoading({
        title: '登录中...'
      });
      
      api.loginWithCode(
        this.code,
        userInfo.encryptedData,
        userInfo.iv
      ).then(res => {
        uni.hideLoading();
        this.isLogging = false;
        
        if (res.success && res.token && res.customer) {
          // 登录成功，保存token和用户信息
          uni.setStorageSync('token', res.token);
          uni.setStorageSync('userInfo', res.customer);
          
          uni.showToast({
            title: '登录成功',
            icon: 'success',
            duration: 1500
          });
          
          // 跳转到用户中心
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/user/user'
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.message || '登录失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        uni.hideLoading();
        this.isLogging = false;
        console.error('登录请求失败:', err);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      });
    },
    
    // 显示用户协议
    showUserAgreement() {
      uni.showModal({
        title: '用户协议',
        content: '这里是用户协议的内容...',
        showCancel: false
      });
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.showModal({
        title: '隐私政策',
        content: '这里是隐私政策的内容...',
        showCancel: false
      });
    }
  }
};
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  padding: 0 60rpx;
}

.login-header {
  margin-top: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
  }
  
  .app-name {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-top: 30rpx;
  }
  
  .welcome-text {
    font-size: 32rpx;
    color: #666;
    margin-top: 20rpx;
  }
}

.login-content {
  margin-top: 120rpx;
  
  .wechat-login-btn {
    width: 100%;
    height: 88rpx;
    background-color: #07c160;
    color: white;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    margin-bottom: 40rpx;
    
    .wechat-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
  
  .login-tips {
    font-size: 24rpx;
    color: #999;
    text-align: center;
    
    .link {
      color: #07c160;
      text-decoration: underline;
    }
  }
}
</style>